<template>
        <a-config-provider :locale="locale" :get-popup-container="popContainer">
                <router-view/>
        </a-config-provider>
</template>

<script>
        import {enquireScreen} from './utils/util'
        import {mapState, mapMutations} from 'vuex'
        import themeUtil from '@/utils/themeUtil';
        import {getI18nKey} from '@/utils/routerUtil'
        import {logout} from '@/services/user'

        export default {
                name: 'App',
                data() {
                        return {
                                locale: {}
                        }
                },
                created() {
                        const that = this;
                        that.setHtmlTitle()
                        that.setLanguage(that.lang)
                        enquireScreen(isMobile => that.setDevice(isMobile))
                },
                mounted() {
                        this.setWeekModeTheme(this.weekMode)
                        this.$nextTick()
                },
                watch: {
                        weekMode(val) {
                                this.setWeekModeTheme(val)
                        },
                        lang(val) {
                                this.setLanguage(val)
                                this.setHtmlTitle()
                        },
                        $route() {
                                this.setHtmlTitle()
                        },
                        'theme.mode': function (val) {
                                let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
                                themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage)
                        },
                        'theme.color': function (val) {
                                let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`)
                                themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage)
                        },
                        'layout': function () {
                                window.dispatchEvent(new Event('resize'))
                        }
                },
                computed: {
                        ...mapState('setting', ['layout', 'theme', 'weekMode', 'lang', 'isMobile', 'isWindowFocus']),
                },
                methods: {
                        ...mapMutations('setting', ['setDevice', 'setIsWindowFocus']),
                        setWeekModeTheme(weekMode) {
                                if (weekMode) {
                                        document.body.classList.add('week-mode')
                                } else {
                                        document.body.classList.remove('week-mode')
                                }
                        },
                        setLanguage(lang) {
                                this.$i18n.locale = lang
                                switch (lang) {
                                        case 'CN':
                                                this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default
                                                break
                                        case 'HK':
                                                this.locale = require('ant-design-vue/es/locale-provider/zh_TW').default
                                                break
                                        case 'US':
                                        default:
                                                this.locale = require('ant-design-vue/es/locale-provider/en_US').default
                                                break
                                }
                        },
                        setHtmlTitle() {
                                const route = this.$route
                                const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path)
                                document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key)
                        },
                        popContainer() {
                                return document.getElementById("popContainer")
                        }
                }
        }
</script>


<style scoped lang="less">
        #id {
        }
</style>

<style lang="less">
        .ant-table-body::-webkit-scrollbar {
                width: 3px;
                height: 3px;
        }

        .ant-table-body::-webkit-scrollbar-thumb {
                border-radius: 5px;
                background: @primary-color;
        }

        .ant-modal-wrap::-webkit-scrollbar {
                display: none !important;
        }

        .ant-select-tree-dropdown::-webkit-scrollbar {
                display: none !important;
        }

        .ant-select-tree-dropdown .ant-select-dropdown-search .ant-select-search__field {
                background: @base-bg-color;
        }

</style>